<template>
	<view class="content">
		<view class="top">
			<swiper indicator-dots="true" circular="true" autoplay="true">
				<swiper-item v-for="(item,index) in banner" :key="index">
					<image v-if="item" :src="item"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="mid-1">
			<!-- 显示的标题 -->
			<view class="mid-icon" v-for="(item,index) in titleArry" :key="item.id" @click="changeContent(index)">
				<image :src="item.icon"></image>
				<text :class="indexNum==index?'active':''">{{item.title}}</text>
			</view>
		</view>

		<view class="mid">


			<!-- 具体的内容显示 -->
			<swiper>
				<swiper-item class="swp-1" v-if="indexNum==0">
					<scroll-view scroll-y="true">
						<view>
							<view v-for="(item,index) in recommend" class="recom" :key="index"  @click="changePage(index)">
								<view class="recom-top">
									<image :src="item.coverpath" lazy-load="true"></image>
								</view>

								<view class="recom-mid">
									<text>{{item.subject}}</text>
									<text style="color: red; margin-top: 20rpx;">价格:{{item.price}}</text>
									<text style="color: #ccc;">{{item.message}}</text>
								</view>
								<view class="recom-foot">
									<view class="circle" @click="recomm()">
										预约
									</view>

								</view>


							</view>


						</view>
					</scroll-view>

				</swiper-item>
				<swiper-item class="swp-2" v-else-if="indexNum==1">
					<scroll-view scroll-y="true">
						<view>
							<view v-for="(item,index) in recommend2" class="recom" :key="index">
								<view class="recom-top">
									<image :src="item.coverpath" lazy-load="true"></image>
								</view>

								<view class="recom-mid">
									<text>{{item.subject}}</text>
									<text style="color: red; margin-top: 20rpx;">价格:{{item.price}}</text>
									<text style="color: #ccc;">{{item.message}}</text>
								</view>
								<view class="recom-foot">
									<view class="circle">
										预约
									</view>

								</view>


							</view>


						</view>
					</scroll-view>
				</swiper-item>
				<!-- current="indexnum" -->
				<swiper-item class="swp-3" v-else-if="indexNum==2" :class="indexNum==2?'active':''" disable-touch="true" @touchmove.stop>
					<scroll-view scroll-y="true">
						<view>
							<view v-for="(item,index) in recommend3" class="recom" :key="index">
								<view class="recom-top">
									<image :src="item.coverpath"lazy-load="true"></image>
								</view>
								<view class="recom-mid">
									<text>{{item.subject}}</text>
									<text style="color: red; margin-top: 20rpx;">价格:{{item.price}}</text>
									<text style="color: #ccc;">{{item.message}}</text>
								</view>
								<view class="recom-foot">
									<view class="circle">
										预约
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>

				<!-- 第四个页面 -->
				<swiper-item class="swp-3"  current="sd"  v-else-if="indexNum==3" disable-touch="true">
					<scroll-view scroll-y="true">
						<view>
							<view v-for="(item,index) in recommend4" class="recom" :key="index" >
								<view class="recom-top">
									<image :src="item.coverpath"lazy-load="true"></image>
								</view>
								<view class="recom-mid">
									<text>{{item.subject}}</text>
									<text style="color: red; margin-top: 20rpx;">价格:{{item.price}}</text>
									<text style="color: #ccc;">{{item.message}}</text>
								</view>
								<view class="recom-foot">
									<view class="circle">
										预约
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<!-- 第五个页面 -->

				<swiper-item class="swp-3"  current="sd" v-else-="indexNum==4" disable-touch="true" @touchmove.stop>
					<scroll-view scroll-y="true">
						<view>
							<view v-for="(item,index) in recommend5" class="recom" :key="index">
								<view class="recom-top">
									<image :src="item.coverpath" lazy-load="true"></image>
								</view>
								<view class="recom-mid">
									<text>{{item.subject}}</text>
									<text style="color: red; margin-top: 20rpx;">价格:{{item.price}}</text>
									<text style="color: #ccc;">{{item.message}}</text>
								</view>
								<view class="recom-foot">
									<view class="circle">
										预约
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>


	</view>
</template>

<script>
	import * as mydata from "../../utils/data.js"
	export default {
		data() {
			return {
				title: 'Hello',
				banner: mydata.getBannerData(),
				titleArry: mydata.getIndexNavData(),
				// 将下标进行接收,初始化一个数字。
				indexNum: 0,
				// 接收数组一
				recommend: [],
				recommend2: [],
				recommend3: [],
				recommend4: [],
				recommend5: [],
				sd:0


			}
		},
		onLoad() {

		},
		methods: {
			changeContent(index) {
				console.log(index)
				this.indexNum = index
			},
			changePage(index){
				// 这里是跳转到详情页面的方法
				console.log(index)
				uni.navigateTo({
					url: `../detail/detail?index=${index}&id=${this.indexNum}`
				})
				
			},
			recomm(){
				// 跳转到预约页面
				uni.navigateTo({
					url:`../reserve/reserve`
				})
			}
			
			
		},
		mounted() {
			// this.banner=mydata.getBannerData()
			// console.log(this.banner)
			// console.log(this.titleArry)
			// console.log(this.recommend)
			let recom = mydata.getIndexNavSectionData()
			this.recommend = recom[0]
			this.recommend2 = recom[1]
			this.recommend3 = recom[2]
			this.recommend4 = recom[3]
			this.recommend5 = recom[4]
			console.log(recom)
			console.log(recom[0])
			console.log(this.recommend)
		},
		created() {


			// this.recommend=recom[0]

		}
	}
</script>

<style scoped>
	.content {
		width: 100%;
		height: 100%;
		overflow: hidden;

	}



	.content .top image {
		width: 100%;

	}

	.mid-1 {
		width: 100%;
		height: 186rpx;
		border: 1rpx solid #333333;
		display: flex;
		justify-content: space-around;
		align-items: center;

	}

	.mid-icon {
		width: 160rpx;
		height: 100%;
		/* border: 1rpx solid #333333; */
		text-align: center;
	}

	.mid-icon image {
		width: 100%;
		height: 120rpx;
	}

	.mid-icon text {
		font-size: 28rpx;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.mid-icon .active {
		color: #ff0f47;
	}

	.mid {
		width: 100%;
		height: auto;
		/* background-color: #4CD964; */
	}

	.mid swiper {
		width: 100%;
		height: 620rpx;
	}

	.swp-1 {
		width: 100%;
		height: 100%;

	}

	.swp-1 scroll-view {
		width: 100%;
		height: 610rpx;
	}

	.recom {
		width: 100%;
		height: 260rpx;
		border: #333333 1rpx solid;
		overflow: hidden;
		position: relative;

	}

	.recom-top {
		width: 160rpx;
		height: 100%;
		margin-left: 20rpx;
		float: left;
		position: relative;
		overflow: hidden;
	}

	.recom image {
		height: 160rpx;
		width: 160rpx;
		position: absolute;
		left: 0px;
		right: 0px;
		top: 0px;
		bottom: 0px;
		margin: auto;
	}

	.recom-mid {
		width: 420rpx;
		height: 100%;
		float: left;
		overflow: hidden;
		/* white-space: nowrap; */
		/* text-overflow: ellipsis; */
		overflow: hidden;
		display: flex;
		/* justify-content: ; */
		flex-direction: column;
		/* align-items: center; */
		justify-content: center;
	}

	.recom-mid text {
		/* display: block; */
		font-size: 28rpx;
		margin-left: 12rpx;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.recom-foot {
		width: 120rpx;
		height: 100%;
		float: right;
		text-align: center;
		position: relative;
		margin-right: 20rpx;
	}

	.recom-foot .circle {
		width: 100%;
		height: 120rpx;
		border-radius: 50%;
		background-color: #ff0000;
		line-height: 120rpx;
		/* overflow: hidden; */
		position: absolute;
		left: 0px;
		top: 0px;
		bottom: 0px;
		right: 0px;
		margin: auto;
	}
</style>
